<template>
  <div>
    <el-form :inline="true" :model="Cha" class="demo-form-inline">
      <el-form-item label="线路名称">
        <el-input v-model="Cha.x_xianluname" placeholder="线路名称"></el-input>
      </el-form-item>
      <el-form-item label="起点">
        <el-input v-model="Cha.x_qidian" placeholder="起点"></el-input>
      </el-form-item>
      <el-form-item label="终点">
        <el-input v-model="Cha.x_zhongdian" placeholder="终点"></el-input>
      </el-form-item>
      <el-form-item label="货主手机号">
        <el-input v-model="Cha.x_huophone" placeholder="货主手机号"></el-input>
      </el-form-item>
      <el-form-item label="货主单位">
        <el-input v-model="Cha.x_huodanwei" placeholder="货主单位"></el-input>
      </el-form-item>
      <el-form-item label="是否外协">
        <el-select v-model="Cha.x_sfwaixie" placeholder="是否外协">
          <el-option label="全部" value="0"></el-option>
          <el-option label="是" value="1"></el-option>
          <el-option label="否" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="XianPage">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button type="danger" @click="Xianpidelete()">批量删除</el-button>
    <el-button type="danger" @click="XianAdd()">新增</el-button>
    <el-table ref="xianpi" :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="线路名称" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{
            scope.row.xianluData.x_xianluname
          }}</span>
        </template>
      </el-table-column>

      <el-table-column label="起点" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{
            scope.row.xianluData.x_qidian
          }}</span>
        </template>
      </el-table-column>

      <el-table-column label="终点" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{
            scope.row.xianluData.x_zhongdian
          }}</span>
        </template>
      </el-table-column>

      <el-table-column label="是否外协" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{
            scope.row.xianluData.x_sfwaixie
          }}</span>
        </template>
      </el-table-column>

      <el-table-column label="货主姓名" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{
            scope.row.mingNameData.x_huoname
          }}</span>
        </template>
      </el-table-column>

      <el-table-column label="货主手机号" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{
            scope.row.xianluData.x_huophone
          }}</span>
        </template>
      </el-table-column>

      <el-table-column label="货主单位" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{
            scope.row.xianluData.x_huodanwei
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{
            scope.row.xianluData.x_beizhu
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="XianEdit(scope.row.xianluData.id)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="XianDelete(scope.row.xianluData.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="Cha.page"
      :limit.sync="Cha.maxResultCount"
      :pageSizes="[2, 4, 6, 8]"
      @pagination="XianPage"
    />
    <!--线路编辑-->
    <el-dialog title="提示" :visible.sync="Bianshow" width="30%">
      <el-form ref="form" :model="BianTable" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="线路名称">
              <el-input v-model="BianTable.x_xianluname"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!--   <el-row>
          <el-col :span="12">
            <el-form-item label="起点">
              <el-input v-model="BianTable.x_qidian"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="终点">
              <el-input v-model="BianTable.x_zhongdian"></el-input>
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row>
          <el-col :span="12">
            <!-- <el-form-item label="起点">
              <el-input  v-model="XianList.x_qidian"></el-input>
            </el-form-item> -->
            <el-form-item label="起点" prop="x_qidian">
              <el-cascader
                v-model="BianTable.x_qidian"
                :options="module_options"
                :props="{
                  label: 'diqu',
                  children: 'sonModules',
                  checkStrictly: true,
                  value: 'diqu',
                  emitPath: false,
                }"
                clearable
              ></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <!-- <el-form-item label="终点">
              <el-input  v-model="XianList.x_zhongdian"></el-input>
              
            </el-form-item> -->
            <el-form-item label="起点" prop="x_zhongdian">
              <el-cascader
                v-model="BianTable.x_zhongdian"
                :options="module_options"
                :props="{
                  label: 'diqu',
                  children: 'sonModules',
                  checkStrictly: true,
                  value: 'diqu',
                  emitPath: false,
                }"
                clearable
              ></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否外协">
              <el-select v-model="BianTable.x_sfwaixie" placeholder="是否外协">
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="货主姓名">
              <el-select v-model="BianTable.x_huoid" placeholder="货主姓名">
                <el-option label="小钢炮" value="1"></el-option>
                <el-option label="大钢炮" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="货主手机号">
              <el-input v-model="BianTable.x_huophone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="货主单位">
              <el-input v-model="BianTable.x_huodanwei"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input v-model="BianTable.x_beizhu"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="XianXiu()">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--线路添加-->
    <el-dialog title="提示" :visible.sync="XianAddShow" width="30%">
      <el-form ref="form" :model="XianList" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="线路名称">
              <el-input v-model="XianList.x_xianluname"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="起点">
              <el-input v-model="XianList.x_qidian"></el-input>
            </el-form-item>
            <el-button type="primary" @click="Qixuan(1)">点击选择地图</el-button>
            
            <!--  <el-form-item label="起点" prop="x_qidian">
                <el-cascader
                  v-model="XianList.x_qidian"
                  :options="module_options"
                  :props="{
                    label: 'diqu',
                    children: 'sonModules',
                    checkStrictly: true,
                    value: 'diqu',
                    emitPath: false,
                  }"
                  clearable
                ></el-cascader>
               
              </el-form-item> -->
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="终点">
              <el-input v-model="XianList.x_zhongdian"></el-input>
               <el-button type="primary" @click="Qixuan(2)">点击选择地图</el-button>
            </el-form-item>
            <!--   <el-form-item label="终点" prop="x_zhongdian">
                <el-cascader
                  v-model="XianList.x_zhongdian"
                  :options="module_options"
                  :props="{
                    label: 'diqu',
                    children: 'sonModules',
                    checkStrictly: true,
                    value: 'diqu',
                    emitPath: false,
                  }"
                  clearable
                ></el-cascader>
               
              </el-form-item> -->
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否外协">
              <el-select v-model="XianList.x_sfwaixie" placeholder="是否外协">
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="货主姓名">
              <el-select v-model="XianList.x_huoid" placeholder="货主姓名">
                <el-option label="小钢炮" value="1"></el-option>
                <el-option label="大钢炮" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="货主手机号">
              <el-input v-model="XianList.x_huophone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="货主单位">
              <el-input v-model="XianList.x_huodanwei"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input v-model="XianList.x_beizhu"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button type="primary" @click="XianBao()">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--起点-->
    <el-dialog title="提示" :visible.sync="QiShow" width="80%">
      <div>
        <el-row>
          <el-col :span="12"> <div id="container"></div></el-col>
          <el-col :span="12">
            经纬度显示:
            <input type="text" id="lng" />
            经纬度显示:
            <input type="text" id="lat" />
            地址
            <input type="text" id="add" />
            <div id="getLatAndLng"></div>
          </el-col>
        </el-row>
      </div>
       <el-button type="primary" @click="Didian()">确认选择地点</el-button>
    </el-dialog>
    <!--终点
      <el-dialog title="提示" :visible.sync="ZhongShow" width="80%">
      <div>
        <el-row>
          <el-col :span="12"> <div id="container"></div></el-col>
          <el-col :span="12">
            经纬度显示:
            <input type="text" id="lng" />
            经纬度显示:
            <input type="text" id="lat" />
            地址
            <input type="text" id="add" />
            <div id="getLatAndLng"></div>
          </el-col>
        </el-row>
      </div>
       <el-button type="primary" @click="Didian2()">确认选择地点</el-button>
    </el-dialog>-->
  </div>
</template>

<script>
import {
  XianPages, //查询
  XianDeletes, //删除
  Xianpideletes, //批删
  XianBaos, //添加
  XianEdits, //编辑反填
  XianXius, //修改保存
  SanJILianDong,
} from "@/api/system_base/CheliangApi"; //引入apijs
import Pagination from "@/components/Pagination"; // 引入分页组件
import car from "@/assets/car.png"; //引入小车图标图片
export default {
  name: "contractPathManager",
  components: { Pagination },
  data() {
    return {
      Bian:"",
       Bian2:"",
       Jia:0,
      Qijingkai: "",
      Qijingjie: "",
      Qiname: "",
      Zhongjingkai: "",
      Zhongjingjie: "",
      Zhongname: "",
      QiShow: false,
      ZhongShow: false,
      module_options: [], //三级联动
      BianTable: [],
      Bianshow: false,
      total: 0,
      XianAddShow: false,
      tableData: [],
      XianList: {
        x_xianluname: "",
        x_qidian: "",
        x_huoid: "",
        x_beizhu: "",
        x_zhongdian: "",
        x_sfwaixie: "0",
        x_huophone: "",
        x_huodanwei: "",
      },
      Cha: {
        x_xianluname: "",
        x_qidian: "",
        x_zhongdian: "",
        x_sfwaixie: "0",
        x_huophone: "",
        x_huodanwei: "",

        page: 1, //当前页
        maxResultCount: 2, //每页几条
        skipCount: 0, //用于api接口  第一条数据位置
      },
    };
  },

  created() {
    this.XianPage();
    this.jilianopen();
  },
  mounted() {
    this.iniMap();
    this.getLatAndLng();
  },

  methods: {
   
    Didian(){
     
      this.QiShow=false;
    },
    // Guan() {
    //   var that=this;
    //   this.$message("啊啊");
    //   that.XianList.x_qidian=this.Qiname;
    //   //that.QiShow=false;
    //   this.$message(that.XianList.x_qidian);
    //   console.log("zhi",that.XianList.x_qidian)
    // },
    //起点点击选择地图
    Qixuan(id) {
      
      if(id==1)
      {
        
      this.QiShow = true;
       this.Bian=1;
       this.Jia=this.Jia+1;
      this.$nextTick(() => {
        this.iniMap();
        this.getLatAndLng();
      
       
      });
     
      }  
      if(id==2)
      {
        
      this.QiShow = true;
       this.Bian=2;
      this.$nextTick(() => {
        this.iniMap();
        this.getLatAndLng();
      
       
      });
      }
    },
  

    //https://jingyan.baidu.com/article/363872eccda8286e4aa16f4e.html 获取百度地图秘钥
    //引入百度js在  public/index.html引入
    //获取坐标可以参考https://lbsyun.baidu.com/jsdemo3.0.htm#js3_2
    iniMap() {
      //设置百度地图两点之间路线 参考 https://lbsyun.baidu.com/jsdemo3.0.htm#drivingroute
      var map = new BMap.Map("container"); //初始化地图
      //设置地图中心点 116.404, 39.915      11代表地图比例
      map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

      //线路开始点
      var p1 = new BMap.Point(116.301934, 39.977552);
      //线路结束点
      var p2 = new BMap.Point(116.508328, 39.919141);

      //声明线路对象
      var driving = new BMap.DrivingRoute(map, {
        renderOptions: { map: map, autoViewport: true },
      });
      //搜索两点之间的推荐线路
      driving.search(p1, p2);

      // 创建小车图标对象 car在上面有引入代码
      var carIcon = new BMap.Icon(car, new BMap.Size(52, 26), {
        //小车图片
        //offset: new BMap.Size(0, -5),    //相当于CSS精灵
        imageOffset: new BMap.Size(0, 0), //图片的偏移量。为了是图片底部中心对准坐标点。
      });
      // 创建Marker标注，使用小车图标
      var pt = new BMap.Point(116.39662709149013, 39.992183926678415);
      var marker = new BMap.Marker(pt, {
        icon: carIcon,
      });
      // 将标注添加到地图
      map.addOverlay(marker);
    },
    getLatAndLng() {
      // Qijingkai:"",
      //Qijingjie:"",
      //Qiname:"",
      //获取经纬度
     
      var map = new BMap.Map("getLatAndLng");
      map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
      map.enableScrollWheelZoom(true);
      var geocoder = new BMap.Geocoder();
      map.addEventListener("click", function (e) {
        //经纬度两个
        document.getElementById("lng").value = e.point.lng;
        document.getElementById("lat").value = e.point.lat;
       // var that=this;
       // that.Qijingkai = e.point.lng;
       // that.Qijingjie = e.point.lat;
        geocoder.getLocation(e.point, function (rs) {
          //获取详细地址
          var addComp = rs.addressComponents;
          var address =
            addComp.province +
            addComp.city +
            addComp.district +
            addComp.street +
            addComp.streetNumber;
          document.getElementById("add").value = address;
          //地址复制
          //var that=this;
         
          
        });
         
      });
    if(this.Bian==1)
    {
       this.XianList.x_qidian = document.getElementById("add").value;
     
      this.Bian=0;
    }
    if(this.Bian==2)
    {
      this.XianList.x_zhongdian = document.getElementById("add").value;
     
      this.Bian=0;
    }
     
     
    },

    jilianopen() {
      SanJILianDong().then((r) => {
        var that = this;
        that.module_options = r.result;
      });
    },
    //编辑
    XianEdit(id) {
      XianEdits(id).then((r) => {
        var that = this;
        that.BianTable = r.result;
      });
      this.Bianshow = true;
    },
    //修改
    XianXiu() {
      if (this.BianTable.x_xianluname == "") {
        this.$message("线路名称不能为空");
        return;
      }
      if (this.BianTable.x_qidian == "") {
        this.$message("起点不能为空");
        return;
      }
      if (this.BianTable.x_zhongdian == "") {
        this.$message("终点不能为空");
        return;
      }
      if (this.BianTable.x_sfwaixie <= 0) {
        this.$message("是否外协不能为空");
        return;
      }
      if (this.BianTable.x_huoid <= 0) {
        this.$message("货主姓名不能为空");
        return;
      }

      var phone = /^1[3|4|5|7|8][0-9]{9}$/;
      if (
        this.BianTable.x_huophone == "" ||
        !phone.test(this.BianTable.x_huophone)
      ) {
        this.$message("手机号不能为空或者手机号格式不正确");
        return;
      }
      if (this.BianTable.x_huodanwei == "") {
        this.$message("货主单位不能为空");
        return;
      }
      if (this.BianTable.x_beizhu == "") {
        this.$message("备注不能为空");
        return;
      }
      XianXius(this.BianTable).then((r) => {
        this.$message("修改成功");
        this.Bianshow = false;
        this.XianPage();
      });
    },
    //添加保存
    XianBao() {
      if (this.XianList.x_xianluname == "") {
        this.$message("线路名称不能为空");
        return;
      }
      if (this.XianList.x_qidian == "") {
        this.$message("起点不能为空");
        return;
      }
      if (this.XianList.x_zhongdian == "") {
        this.$message("终点不能为空");
        return;
      }
      if (this.XianList.x_sfwaixie <= 0) {
        this.$message("是否外协不能为空");
        return;
      }
      if (this.XianList.x_huoid <= 0) {
        this.$message("货主姓名不能为空");
        return;
      }

      var phone = /^1[3|4|5|7|8][0-9]{9}$/;
      if (
        this.XianList.x_huophone == "" ||
        !phone.test(this.XianList.x_huophone)
      ) {
        this.$message("手机号不能为空或者手机号格式不正确");
        return;
      }
      if (this.XianList.x_huodanwei == "") {
        this.$message("货主单位不能为空");
        return;
      }
      if (this.XianList.x_beizhu == "") {
        this.$message("备注不能为空");
        return;
      }
      XianBaos(this.XianList).then((r) => {
        this.$message("添加成功");
        this.XianAddShow = false;
        this.XianPage();
      });
    },
    //批删
    Xianpidelete() {
      var arrid = [];
      var id = this.$refs.xianpi.selection.xianluData.id;
      id.forEach((r) => {
        arrid.push(r.id);
      });
      if (confirm("确认删除吗")) {
        arrid.forEach((r) => {
          Xianpideletes(r).then((r) => {});
          this.$message("批删成功");
          this.YouPage();
        });
      }
    },
    //添加
    XianAdd() {
      this.XianAddShow = true;
    },
    //查询
    XianPage() {
      this.listLoading = true;
      this.Cha.skipCount = (this.Cha.page - 1) * this.Cha.maxResultCount;

      XianPages(this.Cha).then((r) => {
        if (r.result.items != null) {
          var that = this;
          that.tableData = r.result.items;
          this.listLoading = false; // 隐藏加载效果
          this.total = r.result.totalCount;
        }
      });
    },
    ChaXianPage() {
      this.Cha.page = 1;
      this.XianPage();
    },

    //删除
    XianDelete(id) {
      if (confirm("确认要删除吗")) {
        XianDeletes(id).then((r) => {
          this.$message("删除成功");
          this.XianPage();
        });
      }
    },
  },
};
</script>
 <style type="text/css">
#container {
  width: 500px;
  height: 800px;
}
#getLatAndLng {
  width: 500px;
  height: 800px;
}
</style>